<!--  -->
<template>
  <div id="AuthorizedLogin">
    <div class="topNavBox" style="height: 200px;width:100%;"></div>
    <div class="contenBox">
      <div class="userImg">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/photo-mr.jpg" alt="" />
      </div>
      <div class="felx">
        <van-button style="margin-top:100px;background: var(--themeBaseColor);color:#fff" round @click="toLogin">授权登录</van-button>
        <van-button style="margin-top:20px;border:1px solid var(--themeBaseColor);color:var(--themeBaseColor);" round @click="toMember">暂不登录</van-button>
      </div>
    </div>
    <div style="margin:1.15625rem 0 0.8125rem 0.90625rem;font-size: 15px;color: #202020;text-align:left;">申请获取以下权限</div>
    <div style="margin:0 0 0 0.90625rem;font-size: 14px;color: #666666;text-align:left;" >获得你的公开信息（昵称、头像等）</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  activated() {},
  components: {},

  computed: {},

  mounted() {
    let  basic_info =  JSON.parse(localStorage.getItem('yz_basic_info'));
    if(basic_info){
        let root = document.querySelector(":root");
        root.style.setProperty("--themeBaseColor", basic_info.theme_color) ;
    }
    window.firstLogin = 0;
  },

  methods: {
    toLogin(){
      let json = {yz_redirect:this.$route.query.yz_redirect||''};
      if (this.fun.getKey("client") === "work" || window.localStorage.getItem("client")) {
        // 判断是否从企业微信侧边栏进入
        json.crop_id = this.fun.getKey("crop_id");
        json.client = 'work';
      }
      if (window.isMiniprogram) {
        // 小程序 web-view 环境
        json.webview = '1';
      }
      let url = this.fun.getSiteRoot() + this.fun.getRealUrl("member.login.index", json);
      let URL = this.fun.deeplinkURL(url) + 't=' + Math.random();//添加随机数，防止部分机型微信环境下跳转后页面没有刷新
      window.location.href = URL;
    },
    toMember(){
      window.firstLogin = 0;
      this.$router.replace(this.fun.getUrl("member"));
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#AuthorizedLogin {
  .topNavBox {
    // background-image: linear-gradient(90deg, #fe8856 0%, #fd1757 100%);
    background: var(--themeBaseColor);
  }
  .contenBox {
    width: 21.5rem;
    height: 17rem;
    background-color: #fff;
    box-shadow: 0rpx 1px 25px 0rpx rgba(210, 210, 210, 0.63);
    border-radius: 3px;
    margin: 0 auto;
    margin-top: -50px;
    position: relative;
  }

  .userImg {
    width: 4.6875rem;
    height: 4.6875rem;
    border-radius: 100%;
    position: absolute;
    top: -2.5rem;
    left: 8.4375rem;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
  }

  .felx{
    display: flex;
    flex-direction: column;
    padding: 2rem;
  }
}
</style>
